<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import OrderList from './components/OrderList.vue';
	
	// tabs 数据
	const orderTabs = ref([
		{ orderState: 0, title: '全部' },
		{ orderState: 1, title: '待付款' },
		{ orderState: 2, title: '待发货' },
		{ orderState: 3, title: '待收货' },
		{ orderState: 4, title: '待评价' },
	])
	
	// 获取页面参数
	let query = defineProps({
		type: {
			type: String
		}
	})
	
	let activeIndex = ref(0)
	
	onLoad(() => {
		activeIndex.value = query.type
	})
	
	
	
	
</script>

<template>
	<view class="viewport">
		<!-- tabs -->
		<view class="tabs">
			<text class="item" v-for="(item, index) in orderTabs" :key="index" @click="activeIndex = index">{{item.title}}</text>
			<!-- 游标 -->
			<view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view>
		</view>
		<!-- 滑动容器 -->
		<!-- 点击tab，:current可以切换   滑动，@change可以切换  也是神奇啊 -->
		<swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
			<!-- 滑动项 -->
			<swiper-item v-for="item in orderTabs" :key="item.orderState">
				<!-- 订单列表 -->
				<OrderList :orderState="item.orderState" />
			</swiper-item>
		</swiper>
	</view>
</template>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
	}

	.viewport {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	// tabs
	.tabs {
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		margin: 0 10rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
		position: relative;
		z-index: 9;

		.item {
			flex: 1;
			text-align: center;
			padding: 20rpx;
			font-size: 28rpx;
			color: #262626;
		}

		.cursor {
			position: absolute;
			left: 0;
			bottom: 0;
			// width: 20%;
			width: 50rpx;
			height: 6rpx;
			padding: 0 50rpx;
			background-color: #27ba9b;
			/* 过渡效果 */
			transition: all 0.4s;
		}
	}

	// swiper
	.swiper {
		background-color: #f7f7f8;
		flex: 1;
	}

	
</style>